{%extends "base.html"%}
{%block title%}Debug Panel{%endblock%}

{%block onload%}{{ block.super }}update_players();{%endblock%}

{%block body%}
{{ block.super }}

<script type="text/javascript" src="/_ah/channel/jsapi"></script>
<script type="text/javascript" src="/static/dao.js"></script>
<script>
function update_players() {
  dao('player', 'list', null, finish_update_players, alert);
}

function finish_update_players(txt) {
  var players_select = document.getElementById('player');
  playersHTML = ''
  players = txt.split(',');
  for (var i = players.length - 1; i >= 0 ; --i) {
    if (players[i]) {
      data = players[i].split('|');
      playersHTML += "<option value='" + data[1] + "'>" + data[0] + "</option>";
    }
  }
  players_select.innerHTML = playersHTML;
}

function add_score() {
  var player = document.getElementById('player').value;
  var game = document.getElementById('game').value;
  var time = document.getElementById('time').value;
  var score = document.getElementById('score').value;
  dao('score', 'add',
      'player_id=' + player +
      '&game=' + game +
      '&time=' + time +
      '&score=' + score,
      null, alert);
}

function reset_score_form() {
  document.getElementById('game').value = '';
  document.getElementById('time').value = '';
  document.getElementById('score').value = '';
}

var query_socket = null;
function track_query() {
  var args = 'query=' + document.getElementById('query').value
  if (!query_socket) {
    args += '&new_token=1'
  }
  dao('event', 'listen', args, finish_track_query, alert);
}

function on_query_message(message) {
  output = document.getElementById('output');
  output.value = message.data + '\n' + output.value;
}

function on_connection_open() {
  document.getElementById('connection').color = 'green';
}

function on_connection_close() {
  document.getElementById('connection').color = 'red';
}

function finish_track_query(token) {
  if (!query_socket) {
	  var channel = new goog.appengine.Channel(token);
	  query_socket = channel.open();
	  query_socket.onmessage = on_query_message;
	  query_socket.onerror = alert;
	  query_socket.onopen = on_connection_open;
	  query_socket.onclose = on_connection_close;
  }
  document.getElementById('output').value = '';
}

</script>
<h2>Add Score</h2>
<table>
  <tr>
    <th>Player</th>
    <td><select id=player>
      <option value=''>Loading</option>
    </select></td>
  </tr><tr>
    <th>Game:</th>
    <td><input id=game type=text onkeypress="on_enter(event, add_score);" value="Score Attack"/></td>
  </tr><tr>
    <th>Time:</th>
    <td><input id=time type=text onkeypress="on_enter(event, add_score);" value="10"/></td>
  </tr><tr>
    <th>Score:</th>
    <td><input id=score type=text onkeypress="on_enter(event, add_score);" value="10"/></td>
  </tr>
  <tr><td colspan=2 align="right"><button onClick="add_score();">Add</button></td></tr>
</table>
<h2>Debug Console</h2>
<table>
  <tr>
    <th>Query:</th>
    <td><textarea id=query rows=1 cols=50 onkeypress="return on_enter(event, track_query);">event:""</textarea></td>
    <td><button onclick="track_query();"><font color='red' id=connection>Track</font></button></td>
  </tr>
  <tr><td colspan=3><textarea id=output readonly="readonly" rows=40 cols=70></textarea></td></tr>
</table>
{%endblock%}
